<script setup>
import { computed, onMounted, reactive, ref } from 'vue'
import { getTagListAPI, getTypeListAPI, getActivityListAPI } from '@/api/active'
import dayjs from 'dayjs'
const today = dayjs()
const IMAGE_URL = computed(() => import.meta.env.VITE_IMAGE_URL)
const weekdays = ['日', '一', '二', '三', '四', '五', '六']
const datePicker = ref([])
const typeName = ref('类型')
const tagName = ref('标签')
const types = ref([])
const tags = ref([])
const status = [
  { label: '未发布', value: '0' },
  { label: '已发布', value: '1' },
]

const initDateList = (days) => {
  let dateList = []
  for (let i = 0; i < days; i++) {
    dateList.push({
      day: today.add(i, 'day').format('YYYY-MM-DD'),
      week: weekdays[today.add(i, 'day').day()],
    })
  }
  return dateList
}

const form = reactive({
  searchValue: '',
  typeId: '',
  acTags: '',
  isPublish: '',
  currentDate: '', //yyyy-MM-dd格式
})
const dataList = ref([])
const inputChange = (e) => {
  const { value } = e.detail
  console.log(value, 'change')
  form.searchValue = value
}

const activeIndex = ref(0)
const setActiveIndex = (index, item) => {
  activeIndex.value = index
  form.currentDate = item.day
  getDataList()
}

const bindPickerChange = (e, data, type) => {
  const {
    target: { value },
  } = e
  console.log(value, data, data[value], '46===')
  if (type === 'type') {
    typeName.value = data[value]['typeName']
    form.typeId = data[value]['id']
  } else if (type === 'tag') {
    tagName.value = data[value]['tagName']
    form.acTags = data[value]['tagName']
  } else {
    form.isPublish = value
  }
  console.log(form, 'form====')
  getDataList()
}

const getFilterData = async () => {
  try {
    const res = await Promise.all([getTagListAPI(), getTypeListAPI()])
    console.log(res, '49===')
    tags.value = res[0]['data'] || []
    types.value = res[1]['data'] || []
    console.log(types.value, tags.value, '55===')
  } catch (error) {
    const { code, msg } = error
    if (code != '401') {
      uni.showToast({ title: msg, icon: 'none' })
    }
  }
}

const getDataList = async () => {
  const res = await getActivityListAPI(form)
  console.log(res, '54===')
  dataList.value = res.rows || []
}

// 跳转详情
const toDetail = (item) => {
  uni.navigateTo({
    // url: `/pages/active-detail/active-detail?id=${item.id}`,
    url: `/pages/active-detail/active-detail?id=1`,
  })
}

onMounted(() => {
  datePicker.value = initDateList(15)
  form.currentDate = datePicker.value[0]['day']
  getFilterData()
  getDataList()
})
</script>

<template>
  <view class="active-list">
    <view style="padding: 0 32rpx">
      <view class="search-view flex-center">
        <view class="search flex-center">
          <image src="../../static/images/common/search.png" mode=""></image>
          <input
            v-model="form.searchValue"
            placeholder="请输入关键词"
            placeholder-class="input-placeholder"
            @input="inputChange"
          />
        </view>
        <view @click="getDataList" class="search-btn flex-center">搜索</view>
      </view>
      <scroll-view scroll-x="true" class="date-list">
        <view
          class="date-item"
          :class="activeIndex == index ? 'active' : ''"
          v-for="(item, index) in datePicker"
          :key="index"
          @tap="setActiveIndex(index, item)"
        >
          <view class="week">{{ item.week }}</view>
          <view class="day">{{ item.day.slice(-2) }}</view>
          <view v-if="activeIndex == index" class="point"></view>
        </view>
      </scroll-view>
      <view class="fliter-box">
        <view class="filter-item flex-center">
          <picker
            @change="(e) => bindPickerChange(e, types, 'type')"
            range-key="typeName"
            :range="types"
          >
            <view class="flex-center">
              <view class="text">{{ typeName }}</view>
              <image
                src="../../static/images/active/arrow.png"
                mode="aspectFill"
               
              />
            </view>
          </picker>
        </view>
        <view class="filter-item flex-center">
          <picker
            @change="(e) => bindPickerChange(e, tags, 'tag')"
            range-key="tagName"
            :range="tags"
          >
            <view class="flex-center">
              <view class="text">{{ tagName }}</view>
              <image
                src="../../static/images/active/arrow.png"
                mode="aspectFill"
              />
            </view>
          </picker>
        </view>
        <view class="filter-item">
          <picker
            @change="(e) => bindPickerChange(e, status, 'status')"
            range-key="label"
            :range="status"
          >
            <view class="flex-center">
              <view class="text">{{
                form.isPublish === '0'
                  ? '未发布'
                  : form.isPublish === '1'
                  ? '已发布'
                  : '状态'
              }}</view>
              <image
                src="../../static/images/active/arrow.png"
                mode="aspectFill"
              />
            </view>
          </picker>
        </view>
      </view>
    </view>
    <scroll-view scroll-y="true" class="card-list">
      <view
        class="card-item"
        v-for="(item, index) in dataList"
        :key="index"
        @click="toDetail(item)"
      >
        <image :src="`${IMAGE_URL}${item.acCover}`" mode="aspectFill"  class="cover-img" />
        <view class="info">
          <view class="title limit2">{{ item.acName }}</view>
          <view class="status status-begin">{{ item.acTags }}</view>
          <view class="intro limit3">
           <rich-text :nodes="item.acDescrip"></rich-text>
          </view>
          <view class="address limit2">{{ item.acAddress }}</view>
          <view class="date">{{ item.acBegin }}-{{ item.acEnd }}</view>
        </view>
      </view>
      <no-data v-if="dataList.length == 0" />
    </scroll-view>
  </view>
</template>

<style lang="scss" scoped>
.active-list {
  height: 100vh;
  box-sizing: border-box;
  padding: 20rpx 0 0;
  text-align: center;
  .search-view {
    .search {
      height: 66rpx;
      flex: 1;
      border-radius: 88rpx;
      background: #ededed;
      padding: 0 24rpx;
      image {
        width: 36rpx;
        height: 38rpx;
        flex-shrink: 0;
      }
      input {
        flex: 1;
        padding-left: 16rpx;
        text-align: left;
      }
    }
    .search-btn {
      width: 100rpx;
      height: 66rpx;
      border-radius: 8rpx;
      background: #ea5404;
      font-size: 26rpx;
      font-weight: 400;
      color: #ffffff;
      margin-left: 44rpx;
    }
  }
  .date-list {
    margin: 40rpx 0 20rpx;
    white-space: nowrap;
    .date-item {
      height: 150rpx;
      display: inline-block;
      box-sizing: border-box;
      padding: 22rpx 36rpx 0;
      .week {
        font-size: 32rpx;
        font-weight: 400;
        color: #000000;
        margin-bottom: 6rpx;
      }
      .day {
        font-size: 30rpx;
        font-weight: 400;
        color: #000000;
      }
      .point {
        margin: 6rpx auto 0;
        width: 12rpx;
        height: 12rpx;
        border-radius: 50%;
        background: #ea5404;
      }
    }
  }
  .fliter-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .filter-item {
      // width: 156rpx;
      // height: 70rpx;
      padding: 16rpx 36rpx;
      border-radius: 18rpx;
      background: #f5f5f5;
      .text {
        color: #333333;
        font-size: 26rpx;
        font-weight: 400;
        margin-right: 10rpx;
      }
      image {
        width: 20rpx;
        height: 14rpx;
      }
    }
  }
  .card-list {
    height: calc(100vh - 416rpx);
    box-sizing: border-box;
    background: rgb(249, 249, 249);
    margin-top: 20rpx;
    padding: 20rpx 32rpx;
    .card-item {
      margin-bottom: 28rpx;
      box-sizing: border-box;
      padding: 32rpx;
      border-radius: 20rpx;
      background: #ffffff;
      box-shadow: 0px 16rpx 52rpx #e9eff5;
      display: flex;
      image {
        width: 328rpx;
        height: 466rpx;
        flex-shrink: 0;
        margin-right: 26rpx;
        border-radius: 20rpx;
      }
      .info {
        width: 260rpx;
        text-align: left;
        .title {
          line-height: 48rpx;
          font-size: 32rpx;
          font-weight: 500;
          color: #000000;
        }
        .status {
          display: inline-block;
          margin: 20rpx 0;
        }
        .intro {
          line-height: 36rpx;
          color: #333333;
          font-size: 26rpx;
          font-weight: 400;
          margin-bottom: 50rpx;
		  overflow: hidden;
		  max-height: 54px;
        }
        .address,
        .date {
          line-height: 36rpx;
          color: #666666;
          font-size: 24rpx;
          font-weight: 400;
        }
        .address {
          margin-bottom: 20rpx;
        }
      }
    }
  }
}

.active {
  border-radius: 20rpx;
  background: #ffe9de;
}

.status-begin {
  padding: 6rpx;
  border-radius: 6rpx;
  background: #fcecdc;
  font-size: 24rpx;
  font-weight: 400;
  color: #ea5506;
}
.status-end {
  padding: 6rpx;
  border-radius: 6rpx;
  background: #ededed;
  font-size: 24rpx;
  font-weight: 400;
  color: #595959;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.limit2 {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.limit3 {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
</style>
